<template>
  <a-card bordered>
    <a-row style="margin-bottom: 2%;">
      <a-col span="24">
        <span style="font-size: 16px;margin-right: 10px;"> 当前模式:</span>
        <a-space size="large">
          <a-radio-group v-model="configData" button-style="solid" @change="choseChange">
            <a-radio-button value="0">
              店铺客服
            </a-radio-button>
            <a-radio-button value="1">
              平台客服
            </a-radio-button>
            <a-radio-button value="2">
              智齿客服
            </a-radio-button>
          </a-radio-group>
        </a-space>
      </a-col>
    </a-row>


  <a-row>
    <a-col span="8" style="padding: 15px;">

      <a-card hoverable>
        <img
          slot="cover"
          alt="example"
          :src="imgUrl.pf"
          width="300px"
          height="200px"
        />
        <template slot="actions" class="ant-card-actions">
          <a-tooltip>
            <template slot="title">
              设置
            </template>
            <a-icon key="setting" type="setting" style="font-size: 20px;"
                    :spin="spin.pf"
                    @mouseover="mouseOver(1)"
                    @mouseleave="mouseLeave(1)"
                    @click="goToPlatformModal(false)"/>
          </a-tooltip>
          <a-tooltip>
            <template slot="title">
              详情
            </template>
            <a-icon key="search" type="search" style="font-size: 20px;" @click="goToPlatformModal(true)"/>
          </a-tooltip>
        </template>
        <a-card-meta description="平台客服">
          <template slot="title">
            平台客服
            <a-tag color="green" v-if="configData=='1'">
              运行
            </a-tag>
            <a-tag color="red" v-else>
              停止
            </a-tag>
          </template>
          <a-avatar
            slot="avatar"
            :src="imgUrl.pf"
          />
        </a-card-meta>
      </a-card>

    </a-col>
    <a-col span="8" style="padding: 15px;">

      <a-card hoverable>
        <img
          slot="cover"
          alt="example"
          :src="imgUrl.sk"
          width="300px"
          height="200px"
        />
        <template slot="actions" class="ant-card-actions">
          <a-tooltip>
            <template slot="title">
              设置
            </template>
            <a-icon key="setting" type="setting" style="font-size: 20px;"
                    :spin="spin.sk"
                    @mouseover="mouseOver(2)"
                    @mouseleave="mouseLeave(2)"
                    @click="goToSobotModal(false)"/>
          </a-tooltip>
          <a-tooltip>
            <template slot="title">
              详情
            </template>
            <a-icon key="search" type="search" style="font-size: 20px;" @click="goToSobotModal(true)"/>
          </a-tooltip>
        </template>
        <a-card-meta description="智齿客服">
          <template slot="title">
            智齿客服
            <a-tag color="green" v-if="configData=='2'">
              运行
            </a-tag>
            <a-tag color="red" v-else>
              停止
            </a-tag>
          </template>
          <a-avatar
            slot="avatar"
            :src="imgUrl.sk"
          />
        </a-card-meta>
      </a-card>

    </a-col>
  </a-row>
  <platform-modal ref="plantformRef"></platform-modal>
  <sobot-key-modal ref="sobotKeyRef"></sobot-key-modal>
  </a-card>
</template>
<script>
import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";
import {ConfigDictMixins} from "@views/gospel/configCenter/mixins/ConfigDictMixins";
import pf from "../img/plantform.jpeg";
import sk from "../img/sobot.jpeg";
import PlatformModal from "@views/gospel/configCenter/customerService/modules/PlatformModal";
import SobotKeyModal from "@views/gospel/configCenter/customerService/modules/SobotKeyModal";

export default {
  name: "customerServiceConfig",
  mixins: [BoneCommonMixin, ConfigDictMixins],
  components: {PlatformModal, SobotKeyModal},
  data() {
    return {
      description: "客服配置中心",
      imgUrl: {
        pf: pf,
        sk: sk
      },
      type: "customerServiceMode",
      url: {
        switchType: "/cms/config/updateByType",
      },
      spin: {
        pf: false,
        sk: false,
      }
    }
  },
  created() {
    this.queryDict();
  },
  methods: {
    goToPlatformModal(value) {
      this.$refs.plantformRef.visible = true;
      this.$refs.plantformRef.disable = value;
      this.$refs.plantformRef.queryJsonDict();
    },
    goToSobotModal(value) {
      this.$refs.sobotKeyRef.visible = true;
      this.$refs.sobotKeyRef.disable = value;
      this.$refs.sobotKeyRef.queryJsonDict();
    },
    mouseOver: function (value) {
      switch (value) {
        case 0:
          this.spin.pf = true;
          break;
        case 1:
          this.spin.sk = true;
          break;
      }
    },
    mouseLeave: function (value) {
      switch (value) {
        case 0:
          this.spin.pf = false;
          break;
        case 1:
          this.spin.sk = false;
          break;
      }
    },
  }
}
</script>

<style scoped>

</style>